<template>
  <div class="home">
    <ul class="con">
      <li v-for="item in list" :key="item.id" @click="gotodetail(item.id)">
        <!-- <router-link to="/detail"> -->
        <img :src="item.img_url" alt="" />
        <h3>{{ item.title }}</h3>
        <p>{{ item.zhaiyao }}</p>
        <p>价格{{ item.sell_price }}</p>
        <!-- </router-link> -->
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [],
    };
  },
  created() {
    this.$axios.get("/api/getgoods?pageindex=1").then((res) => {
      console.log(res);
      this.list = res.data.message;
    });
  },
  methods: {
    gotodetail(id) {
      // this.$router.push({ path: "/detail", query: { aa: id } });
      //在跳转详情页的时候携带一个query 参数，跳转name和path都可以使用
      // this.$router.push({ name: "detail", params: { id: id } });
      //params传参的时候 跳转只能用name
      // /detail/112
      this.$router.push({ path: "/detail/" + id });
      //动态路由 必须要拼上id 在详情页用params接收
    },
  },
};
</script>
<style lang="scss" scoped>
.con {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  li {
    width: 45%;
    border: 1px solid #ccc;
    margin-top: 30px;
  }
}
</style>
